<template>
	<view class="synopsisss">
		<view class="synopsiss">
			<view class="synopsis">
				<text class="synopsis-01" @click="cancel">取消</text>
				<text class="synopsis-01">编辑简介</text>
				<u-button class="synopsis-01 no" text="保存" :plain='true' :hairline="false" :color="color" size="small"
					@click="save" style="border: 0;"></u-button>
			</view>
           <u-toast ref="uToast"></u-toast>
           <u-cell :title="item.title" title-style='red' v-for="(item, index) in list" :key="index"
           	@click="showToast(item)" class="sav" :border="false" :style="{ 'border-bottom': 'none'}">
           </u-cell>
			<text class="synopsis_text">七天内可修改三次简介</text>
			<view class="Message-field-01">
				<textarea v-model="textareaValue" @input="updateWordCount" name="" id="" cols="53" rows="10"
					class="Message-field-02" placeholder="点击填写兴趣爱好,生活方式等个人简介" maxlength="100"></textarea>
				<view class="font-count">
					{{wordCount}}/100
				</view>

			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [{
					type: 'default',
					title: '保存',
					message: "保存成功"
				}],
				textareaValue: '', // 初始化文本域的值
				originalValue: '', // 存储原始值
				wordCount: 0,
				color: '#ffc4de'
			}
		},
		methods: {
			cancel() {
				uni.navigateBack({
					delta: 1
				})
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
				})
			},
			updateWordCount() {
				this.wordCount = this.textareaValue.length;
			},
			save() {
				if (this.canSave) {
					// 执行保存操作，比如发送数据到服务器
  
					// 更新原始值，以便下次可以判断是否再次修改
					this.originalValue = this.textareaValue;
				}
			}
		},
		watch: {
			textareaValue(newValue, oldValue) {
				// 当文本域的值发生变化时，这个函数会被调用
				if (newValue !== this.originalValue) {
					this.color = "red"
				}
				this.updateWordCount();
			}
		},
		mounted() {
			// 假设原始值是在组件挂载时从服务器获取的
			this.originalValue = this.textareaValue;
			this.updateWordCount(); // 确保初始字数显示正确
		}
	}
</script>

<style scoped>
	
	.synopsisss{
		height: 1550rpx;
		background-color: #f5f5f5;
	}
	.synopsiss {
		height: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		background-color: #f5f5f5;

	}
.sav {
		color: red;
		opacity: 0;
		position: absolute;
		top: 15px;
		right: 150rpx;
		/* font-size: 16px; */
	}
	.synopsis {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		margin-top: 10rpx;
	}

	.synopsis-01 {
		width: 180rpx;
		text-align: center;
	}

	.no::after {
		content: none;
	}

	.no::before {
		background-color: #f5f5f5;
	}

	.Message-field-02 {
		width: 650rpx;
		height: 300rpx;
		border-radius: 16px;
		background-color: #fff;
	}

	.font-count {
		width: 100%;
		text-align: right;
	}
</style>